<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>校园物品招领 - 列表</title>
</head>
<body>
    <div layout:fragment="content" class="fade-in">
        <!-- 搜索栏 -->
        <div class="card mb-4">
            <div class="card-body">
                <form action="/items" method="get" class="row g-3">
                    <div class="col-md-10">
                        <div class="input-group">
                            <span class="input-group-text bg-primary text-white"><i class="fas fa-search"></i></span>
                            <input type="text" class="form-control" id="keyword" name="keyword" th:value="${keyword}" placeholder="搜索物品标题或描述...">
                            <button type="submit" class="btn btn-primary">
                                搜索
                            </button>
                        </div>
                    </div>
                    <div class="col-md-2 text-end">
                        <a href="/items/new" class="btn btn-success w-100">
                            <i class="fas fa-plus"></i> 发布信息
                        </a>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 过滤器 -->
        <div class="card mb-4 filter-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-filter me-2"></i>筛选条件</h5>
                <button id="filter-toggle" class="btn btn-sm btn-outline-light" type="button">
                    <i class="fas fa-chevron-up"></i> <span>收起筛选</span>
                </button>
            </div>
            <div class="card-body filter-body">
                <form action="/items" method="get" class="row g-3">
                    <!-- 类型筛选 -->
                    <div class="col-md-4">
                        <label for="type" class="form-label"><i class="fas fa-tag me-1"></i>物品类型</label>
                        <select name="type" id="type" class="form-select">
                            <option value="">全部类型</option>
                            <option th:each="type : ${itemTypes}" th:value="${type}" th:text="${type.displayName}"
                                    th:selected="${selectedType == type}"></option>
                        </select>
                    </div>
                    <!-- 状态筛选 -->
                    <div class="col-md-4">
                        <label for="status" class="form-label"><i class="fas fa-info-circle me-1"></i>状态</label>
                        <select name="status" id="status" class="form-select">
                            <option value="">全部状态</option>
                            <option th:each="status : ${itemStatuses}" th:value="${status}" th:text="${status.displayName}"
                                    th:selected="${selectedStatus == status}"></option>
                        </select>
                    </div>
                    <!-- 关键词搜索 -->
                    <div class="col-md-4">
                        <label for="keyword2" class="form-label"><i class="fas fa-search me-1"></i>关键词</label>
                        <input type="text" class="form-control" id="keyword2" name="keyword" th:value="${keyword}" placeholder="搜索标题或描述...">
                    </div>
                    <div class="col-12 text-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-filter"></i> 筛选
                        </button>
                        <a href="/items" class="btn btn-secondary">
                            <i class="fas fa-sync"></i> 重置
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- 物品列表 -->
        <div class="mb-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h2><i class="fas fa-list me-2"></i>物品列表</h2>
                <div>
                    <span class="text-muted me-2">
                        共 <span th:text="${#lists.isEmpty(items) ? 0 : #lists.size(items)}">0</span> 条结果
                    </span>
                </div>
            </div>

            <!-- 无数据提示 -->
            <div class="alert alert-info" th:if="${#lists.isEmpty(items)}">
                <div class="text-center py-5">
                    <i class="fas fa-info-circle fa-3x mb-3 text-info"></i>
                    <h5>暂无符合条件的物品信息</h5>
                    <p class="text-muted">请尝试更改筛选条件或发布新信息</p>
                </div>
            </div>

            <!-- 物品卡片列表 -->
            <div class="row row-cols-1 row-cols-md-3 g-4" th:if="${not #lists.isEmpty(items)}">
                <div class="col" th:each="item : ${items}">
                    <div class="card h-100">
                        <!-- 状态标签 -->
                        <div class="position-absolute top-0 end-0 p-2">
                            <span class="badge" th:classappend="${item.status == T(meiyunting.shiwuzhaoling.model.ItemStatus).LOST ? 'bg-danger' : 'bg-success'}"
                                  th:text="${item.status != null ? item.status.displayName : '未知'}"></span>
                        </div>
                        
                        <!-- 图片容器 -->
                        <div class="card-img-container overflow-hidden">
                            <!-- 图片 -->
                            <img th:if="${item.imagePath != null}" th:src="${item.imagePath}" class="card-img-top item-image" alt="物品图片">
                            <img th:if="${item.imagePath == null}" src="/static/images/no-image.svg" class="card-img-top item-image" alt="无图片">
                        </div>
                        
                        <div class="card-body">
                            <h5 class="card-title text-truncate" th:text="${item.title != null ? item.title : '无标题'}">物品标题</h5>
                            <div class="d-flex align-items-center mb-2">
                                <span class="badge bg-secondary me-2">
                                    <i class="fas fa-tag me-1"></i>
                                    <span th:text="${item.type != null ? item.type.displayName : '未知'}">物品类型</span>
                                </span>
                                <small class="text-muted">
                                    <i class="fas fa-clock me-1"></i>
                                    <span th:text="${item.lostTime != null && #temporals != null ? #temporals.format(item.lostTime, 'yyyy-MM-dd') : (item.createdAt != null && #temporals != null ? #temporals.format(item.createdAt, 'yyyy-MM-dd') : '未知')}">丢失/拾获时间</span>
                                </small>
                            </div>
                            <p class="card-text text-truncate" th:text="${item.description != null ? item.description : '无描述'}">物品描述...</p>
                            <div class="d-grid mt-3">
                                <a th:href="@{/items/{id}(id=${item.id})}" class="btn btn-outline-primary">
                                    <i class="fas fa-eye"></i> 查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script th:inline="javascript">
        document.addEventListener('DOMContentLoaded', function() {
            // 活跃导航项
            const navLinks = document.querySelectorAll('.nav-link');
            navLinks.forEach(link => {
                if (link.getAttribute('href').includes('/items')) {
                    link.classList.add('active');
                }
            });
        });
    </script>
</body>
</html> 